<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>订单表</title>
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="plugins/element-ui/index.css" />-->
    <link rel="stylesheet" href="../../../styles/common.css" />

</head>

<body>
<!--<h1>管理员账号管理</h1>-->
<div class="app" id="app">
    <!--    <el-container style="height: 750px; ">-->
    <!--    有一条细细的白线-->

    <!--1.主要内容-->
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-container>
            <div style="width: 100%;position: relative">
                <div style=";margin-bottom: 25px;">
                    <el-input
                            placeholder="请输入订单号"

                            clearable
                            style="width: 20%; "
                            prefix-icon="el-icon-search"
                            v-model="orderQuery.orderId"
                    >
                    </el-input>
                    <el-button @click="getAll()" class="dalfBut">查询</el-button>
                </div>
                <el-table   size="medium" current-row-key="id"  :data="dataList" stripe highlight-current-row>

                    <el-table-column type="index" align="center" label="序号"></el-table-column>

                    <el-table-column prop="orderId" label="订单号" align="center"></el-table-column>
                    <el-table-column prop="userId" label="下单用户" align="center"></el-table-column>
                    <el-table-column prop="payTime" label="支付时间" align="center"></el-table-column>
                    <el-table-column prop="amount" label="实收金额" align="center"></el-table-column>

                    <el-table-column prop="way" label="方式" align="center"></el-table-column>
                    <el-table-column prop="wayDetail" label="具体信息" align="center"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" @click="deleteOrders(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页组件-->
                <el-pagination
                        class="pagination"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

        </el-container>
    </el-container>

</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>


<script>


    new Vue({
        el: '#app',
        data:{
//1.主页面内容
            //显示数据
            dataList:[],
            tableData:[],

            //分页插件
            pagination: {//分页相关模型数据 1
                currentPage: 1,//当前页码1
                pageSize:5,//每页显示的记录数1
                total:0,//总记录数1
            },

            //管理员搜索内容1
            orderQuery:{
                orderId:""
            },


        },
        created() {
            this.getAll();
        },

        methods: {
            getAll(){
                parent ="?orderId="+this.orderQuery.orderId;
                // alert(parent)
                axios.get("/orders/"+this.pagination.currentPage+"/"+this.pagination.pageSize+parent).then((res)=>{

                    this.dataList=res.data.data.records
                    this.pagination.total=res.data.data.total
                    this.orderQuery.orderId=""
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.getAll();
            },

            //删除员工
            deleteOrders(row) {

                this.$confirm("此操作删除当前订单信息，是否继续?","提醒",{type: 'info'
                }).then(()=>{

                    axios.delete("/orders/"+row.id).then((res)=>{
                        this.$message.success(res.data.msg)
                    })
                }).catch(()=>{
                    //取消删除
                    this.$message.info("取消删除操作")
                }).finally(()=>{
                    this.getAll();
                })

            },



        }
    })
</script>
</body>
</html>
